<template>
	<view class="collect_main">
		<view class="collect_title">
			<text class="collect_tips active">全部</text>
			<text class="collect_tips">正在热卖</text>
			<text class="collect_tips">即将上线</text>
		</view>

		<view class="collect_content">
			<view class="goods_item" v-for="item in lists" :key="item.goods_id" @click="handelGoToCollection(item.goods_id)">
				<!-- 左侧图片容器 -->
				<view class="goods_item_warp">
					<image
						mode="widthFix"
						:src="item.goods_small_logo?item.goods_small_logo:'http://image4.suning.cn/uimg/b2c/newcatentries/0070175200-000000000763892692_2_800x800.jpg'"
					></image>
				</view>
				<!-- 右侧商品容器 -->
				<view class="goods_info_warp">
					<view class="goods_name">{{ item.goods_name }}</view>
					<view class="goods_price">￥{{ item.goods_price }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			getCollectionLists(){
				this.lists = uni.getStorageSync('collect') || [];
			},
			//跳转到收藏页面
			handelGoToCollection(id){
				console.log(id)
				uni.navigateTo({
					url:"/pages/goods-detail/goods-detail?goods_id=" + id
				})
			}
		},
		onLoad() {
			this.getCollectionLists();
		}
	}
</script>

<style scoped>
	.collect_main{
	  background-color: #f3f4f6;
	}
	.collect_title{
	  padding: 40rpx 0;
	}
	.collect_tips{
	  padding: 15rpx;
	  border: 1rpx solid #ccc;
	  margin: 25rpx;
	  background-color: #fff;
	}
	.active{
	  color: rgb(235, 80, 68);
	  border-color: currentColor;
	}
	
	/* 内容样式 */
	.goods_item{
	  display: flex;
	  border-bottom: 1px solid #eee;
	  padding: 10rpx 0;
	  background-color: #fff;
	}
	.goods_item_warp{
	  flex: 2;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	image{
	  width: 70%;
	}
	.goods_info_warp{
	  flex: 3;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	}
	.goods_name{
	  display: -webkit-box;
	  overflow: hidden;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp:2;
	}
	.goods_price{
	  color: var(--themeColor);
	  font-size: 32rpx;
	}
</style>
